<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="gl">

	<head>
		<title>
			cSans - Test
		</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<meta http-equiv="Content-Language" content="gl" />
		<meta name="author" content="A navalla suíza - http://anavallasuiza.com" /><!-- Cargamos cSans -->
		<link rel="stylesheet" href="../csans/csans.css" type="text/css" />
		<link rel="stylesheet" href="../csans/grid-950-24-10/css/csans-grid-950-24-10.css" type="text/css" />
		<style type="text/css">
			.google {
				background-image: url(http://www.google.es/intl/en_com/images/logo_plain.png);
				width: 276px;
				height: 110px;
			}
			.yahoo {
				background-image: url(http://l.yimg.com/a/i/ww/beta/y3.gif);
				width: 232px;
				height: 44px;
			}
			.msn {
				background-image: url(http://tk2.stc.s-msn.com/br/hp/11/en-us/css/i/msn_b2.gif);
				width: 148px;
				height: 65px;
			}
			.emoticon {
				background-image: url(http://www.snk-neofighters.com/forum/style_emoticons/default/xP_emoticon.png);
				width: 19px;
				height: 19px;
			}
			.search {
				background-image: url(http://yoparticipo.com/pajara/mambots/content/icontent/icon/search.gif);
				width: 40px;
				height: 40px;
			}
			.blue { background: blue; color: #fff; }
			.green { background: green; }
		</style>
	</head>

	<body>
		<div class="page">
			<div id="image" class="row t4">
				<h2>.image (with and without link)</h2>
				<a href="http://google.com" class="image google">Google</a>
				<span class="image google">Google</span>
				<hr />
				
				<h2>ul.image (with and without link)</h2>
				<ul class="image">
					<li class="google"><a href="http://google.com1">Google</a></li>
					<li class="yahoo"><a href="http://yahoo.com1">Yahoo!</a></li>
					<li class="msn"><a href="http://msn.com1">Msn</a></li>
				</ul>
				<ul class="image">
					<li class="google">Google</li>
					<li class="yahoo">Yahoo!</li>
					<li class="msn">Msn</li>
				</ul>
				
				<h2>a.image / strong.image / em.image / span.image</h2>
				<p>Lorem ipsum dolor sit amet, <a href="#" class="image emoticon" title="This is a link">consectetur adipiscing</a> elit. <span title="This is a span" class="image emoticon">Fusce at purus</span>. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, <strong title="This is a strong" class="image emoticon">libero</strong>. Vestibulum vitae tortor <em title="This is a em" class="image emoticon">pharetra est</em> convallis cursus.</p>
			</div>
			
			<div id="tabs" class="row t4">
				<h2>.tabs (Google .select)</h2>
				<ul class="tabs">
					<li class="select"><a href="http://google.com">Google</a></li>
					<li><a href="http://msn.com">MSN</a></li>
					<li><a href="http://yahoo.com">Yahoo!</a></li>
				</ul>
			</div>
			
			<div id="inline" class="row t4">
				<h2>.inline (demo with fieldset)</h2>
				<form class="col11" action="">
					<fieldset>
						<input type="text" value="Default fieldset" />
						<input type="submit" value="Search" />
					</fieldset>
				</form>
				<form class="col11 l1" action="">
					<fieldset class="inline">
						<input type="text" value=".inline fieldset with submit.image" class="col" />
						<input type="submit" class="image search" value="Search" />
					</fieldset>
				</form>
			</div>
			
			<div id="inline-block" class="row t4">
				<h2>.inline-block-top</h2>
				<div class="col6 inline-block-top">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at purus. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, libero.
				
				</div><div class="col6 inline-block-top">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at purus. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, libero. Vestibulum vitae tortor pharetra est convallis cursus. Praesent massa nisl, blandit porta, mollis porttitor, suscipit vitae, urna.
				
				</div><div class="col6 inline-block-top">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at purus. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, libero. Vestibulum vitae tortor pharetra est convallis cursus. Praesent massa nisl, blandit porta, mollis porttitor, suscipit vitae, urna. Etiam mollis neque elementum nunc. Nulla pulvinar eros at enim. Integer ut quam. Suspendisse justo. Nulla a ipsum ut odio laoreet vehicula. Duis volutpat.
				
				</div><div class="col6 inline-block-top last">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				</div>
				
				<h2>.inline-block-middle</h2>
				<div class="col6 inline-block-middle">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at purus. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, libero.
				
				</div><div class="col6 inline-block-middle">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at purus. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, libero. Vestibulum vitae tortor pharetra est convallis cursus. Praesent massa nisl, blandit porta, mollis porttitor, suscipit vitae, urna.
				
				</div><div class="col6 inline-block-middle">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at purus. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, libero. Vestibulum vitae tortor pharetra est convallis cursus. Praesent massa nisl, blandit porta, mollis porttitor, suscipit vitae, urna. Etiam mollis neque elementum nunc. Nulla pulvinar eros at enim. Integer ut quam. Suspendisse justo. Nulla a ipsum ut odio laoreet vehicula. Duis volutpat.
				
				</div><div class="col6 inline-block-middle last">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				</div>
				
				<h2>.inline-block-bottom</h2>
				<div class="col6 inline-block-bottom">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at purus. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, libero.
				
				</div><div class="col6 inline-block-bottom">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at purus. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, libero. Vestibulum vitae tortor pharetra est convallis cursus. Praesent massa nisl, blandit porta, mollis porttitor, suscipit vitae, urna.
				
				</div><div class="col6 inline-block-bottom">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce at purus. Maecenas lectus enim, vulputate quis, luctus sed, sagittis sit amet, libero. Vestibulum vitae tortor pharetra est convallis cursus. Praesent massa nisl, blandit porta, mollis porttitor, suscipit vitae, urna. Etiam mollis neque elementum nunc. Nulla pulvinar eros at enim. Integer ut quam. Suspendisse justo. Nulla a ipsum ut odio laoreet vehicula. Duis volutpat.
				
				</div><div class="col6 inline-block-bottom last">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				</div>
			</div>
			
			<div id="hide" class="row t4">
				<h2>.left / .right / .right-right</h2>
				<div class="col6 omg-green left">
					This is a .left layer
				</div>
				<hr />
				<div class="col6 omg-red right last">
					This is a .right layer
				</div>
				<hr />
				<div class="col6 omg-blue right-right last">
					This is a .right-right layer
				</div>
			</div>
			
			<div id="no-collapse" class="row t4">
				<h2>.no-collapse</h2>
				<div class="green">
					<div class="blue t2">
						This is a blue layer (with margin-top: 20px) inside a green layer (with margin: 0px);
					</div>
				</div>
				<hr class="t2" />
				<div class="no-collapse green">
					<div class="blue t2">
						This is a blue layer (with margin-top: 20px) inside a green layer (with margin: 0px and .no-collapse);
					</div>
				</div>
			</div>
			
			<div id="clear" class="row t4">
				<h2>.clear</h2>
				<div class="green">
					<div class="blue col4">
						This a blue layer is floating left inside a green layer
					</div>
					<div class="blue col4">
						This is another blue floating layer
					</div>
				</div>
				<hr class="b2" />
				<div class="clear green">
					<div class="blue col4">
						This a blue layer is floating left inside a green .clear layer
					</div>
					<div class="blue col4">
						This is another blue floating layer
					</div>
				</div>
			</div>

		</div>
	</body>
</html>